import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { createRoot } from "react-dom/client";
import SemiTable from "./ActionTable";

@customElement("action-lit-component")
export class MyLitComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
      color: blue;
    }
  `;

  @property({ type: Array })
  list = [];

  @property({ type: Array })
  columns = [];

  @property({ type: Array })
  dataSource = [];

  constructor() {
    super();
    this.root = null;
    this.attachShadow({ mode: "open" }); // 使用 Shadow DOM

    this.root = createRoot(this.shadowRoot as any);
  }

  connectedCallback() {
    super.connectedCallback();
  }

  disconnectedCallback() {
    // 当自定义元素从 DOM 中移除时调用
    if (this.root) {
      this.root.unmount(); // 卸载 React 组件
      this.root = null;
    }
  }

  render() {
    if (!this.root) {
      return;
    }
    return this.root.render(
      <SemiTable
        list={this.list}
        columns={this.columns}
        dataSource={this.dataSource}
      />
    );
  }
}
